{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px nav-left p-4 overflow-y-auto">
	{include file="module/user/personal_left"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow">
			<div class="py-3">
				<el-button-group class="text-nowrap">
				  <el-button type="success" size="mini" @click="setReadALL">设为已读</el-button>
				  <el-button type="danger" size="mini" @click="delMessageALL">删除</el-button>
				</el-button-group>
			</div>
			<div class="table-responsive">
				<el-table
					ref="multipleTable"
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;"
		    		header-cell-class-name="bg-1E54E5 text-666666"
					@selection-change="handleSelectionChange">
				  <el-table-column
				    type="selection"
				    width="55">
				  </el-table-column>
			      <el-table-column
			        label="消息标题"
			        show-overflow-tooltip>
			        <template slot-scope="scope">
			        	<el-link :underline="false"
				        @click="showMessage(scope.row)">{{scope.row.title}}</el-link>
			        </template>
			      </el-table-column>
			      <el-table-column
			        prop="is_read"
			        label="查看状态"
			        width="100"
			        :filter-multiple="false"
				    :filters="[{text: '已查看', value: 1}, {text: '未查看', value: 0}]"
				    :filter-method="filterHandler">
			        <template slot-scope="scope">
			        	<span v-if="scope.row.is_read" class="text-success">已查看</span>
			        	<span v-else class="text-secondary">未查看</span>
			        </template>
			      </el-table-column>
			      <el-table-column
			        prop="create_time"
			        label="发送时间"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="status"
			        label="操作"
			        width="120">
			        <template slot-scope="scope">
			        	<el-button
				          size="minism"
				          type="primary"
				          @click="showMessage(scope.row)">查看</el-button>
				        <el-button
				          size="minism"
				          type="danger"
				          @click="delMessage(scope.row,scope.$index)">删除</el-button>
			        </template>
			      </el-table-column>
			    </el-table>
			</div>
			<div class="pt-3">
				<el-button-group class="text-nowrap">
				  <el-button type="success" size="mini" @click="setReadALL">设为已读</el-button>
				  <el-button type="danger" size="mini" @click="delMessageALL">删除</el-button>
				</el-button-group>
			</div>
			<div class="table-responsive py-3">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="setPageChange"
			      :current-page="search.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
<el-drawer
  :visible.sync="messageContent.id"
  :with-header="false">
	<div class="wrap h-100">
		<div class="flex px-3 py-2">
			<div class="flex-1 block-title-before py-2">{{messageContent.title}}</div>
		</div>
		<div class="flex1 p-3 overflow-auto" v-html="XYBase.conGetHtml(messageContent.content)"></div>
  	</div>
</el-drawer>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			multipleSelectionIndex:0,
			multipleSelectionLength:0,
			search:{
		    	ajax:false,
				total:0,
				page: 1
			},
			messageContent:{
				id:0,
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:XYBase.methods({
			toggleSelection(rows) {
				if (rows) {
				  rows.forEach(row => {
				    this.$refs.multipleTable.toggleRowSelection(row);
				  });
				} else {
				  this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			filterHandler(value, row, column){
		        const property = column['property'];
		        return row[property] === value;
			},
			showMessage(val){
				var _this=this;
				var loading=XYBase.openloading();
				_this.sendGet({
					url:'/user/message/getContent/'+val.id,
				},function(ret){
					loading.close();
					if (ret) {
						if (ret.code === 0) {
							val.is_read=1;
							setTimeout(function(){
								_this.messageContent=ret.data;
							},300);
						}else XYBase.msg(ret.msg);
					}
				});
			},
			setReadALL(){
				var _this=this;
				if (_this.multipleSelection.length<1)return;
				loading = XYBase.openloading();
				_this.multipleSelectionIndex=0;
				_this.setReadALLAjax();
			},
			setReadALLAjax(){
				var _this=this;
				var D=_this.multipleSelection[_this.multipleSelectionIndex];
				if (D) {
					loading.setText((_this.multipleSelectionIndex+1)+'/'+_this.multipleSelection.length);
					_this.sendGet({
						url:'/user/message/setRead/'+D.id
					},function(ret) {
						if (ret) {
							if(ret.code === 0){
								_this.multipleSelection[_this.multipleSelectionIndex].is_read=1;
								_this.multipleSelectionIndex++;
								_this.setReadALLAjax();
							}else{
								_this.multipleSelectionIndex++;
								_this.setReadALLAjax();
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
				          	loading.close();
							_this.multipleSelectionIndex=0;
					        _this.$refs.multipleTable.clearSelection();
						}
					});
				}else{
		          	loading.close();
					_this.multipleSelectionIndex=0;
			        _this.$refs.multipleTable.clearSelection();
				}
			},
			delMessage(val,index){
				var _this=this;
					_this.sendGet({
						url:'/user/message/del/'+val.id
					},function(ret) {
						if (ret) {
							if(ret.code === 0){
								_this.tableData.splice(index,1);
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}
					});
			},
			delMessageALL(){
				var _this=this;
				if (_this.multipleSelection.length<1)return;
				loading = XYBase.openloading();
				_this.multipleSelectionIndex=0;
				_this.multipleSelectionLength=_this.multipleSelection.length;
				_this.delMessageALLAjax();
			},
			delMessageALLAjax(){
				var _this=this;
				var i=0;
				var D=_this.multipleSelection[i];
				if (D) {
					loading.setText((_this.multipleSelectionIndex+1)+'/'+_this.multipleSelectionLength);
					_this.sendGet({
						url:'/user/message/del/'+D.id
					},function(ret) {
						if (ret) {
							if(ret.code === 0){
								for (var i = 0; i < _this.tableData.length; i++) {
									if (_this.tableData[i].id==D.id)
										_this.tableData.splice(i,1);
								}
								_this.multipleSelectionIndex++;
								setTimeout(function(){
									_this.delMessageALLAjax();
								},100);
							}else{
								_this.multipleSelectionIndex++;
								_this.delMessageALLAjax();
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
				          	loading.close();
							_this.multipleSelectionIndex=0;
					        _this.$refs.multipleTable.clearSelection();
						}
					});
				}else{
		          	loading.close();
					_this.multipleSelectionIndex=0;
			        _this.$refs.multipleTable.clearSelection();
				}
			},
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							var Data=ret.data.data;
							_this.tableData=Data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
		})
	});
</script>
{/block}